<template>
  <el-dialog v-model="Store.dialogBoardVisible" title="查看公告" width="500">
    <el-table :data="paginatedData">
      <el-table-column property="timestamp" label="日期" width="150" />
      <el-table-column property="title" label="标题" width="150" />
      <el-table-column property="content" label="内容" />
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="Store.gridData2.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAnnouncementsStore } from '@/stores/announcements.js'
const Store = useAnnouncementsStore()

const currentPage = ref(1)
const pageSize = ref(5)

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return Store.gridData2.slice(start, end)
})

const handlePageChange = (newPage) => {
  currentPage.value = newPage
}
</script>

<style scoped></style>
